<template lang="pug">
.view.cp-purchase
  el-tabs.pe-tabs(v-model="activeName")
    el-tab-pane(v-for="(pane, index) in paneList", :label="pane.value", :name="pane.name", :key="index")
  .fix-flex-pos.pe-main
    keep-alive
      router-view
</template>

<script>
import { mapGetters } from 'vuex';
import { hasPermission } from '@/utils';
import ComApi from '@/api/common';

export default {
  name: 'purchase',
  data() {
    return {
      panes: []
    };
  },
  computed: {
    paneList () {
      return this.panes.filter((pane) => {
        if (pane.name === 'price') {
          return false;
        }
        return hasPermission(this.roles, pane);
      });
    },
    activeName: {
      set (name) {
        this.$router.push({ name: `pur${name}` });
      },
      get () {
        return `${this.$route.path.split('/')[2]}`;
      }
    },
    ...mapGetters(['roles'])
  },
  beforeRouteEnter (to, from, next) {
    ComApi.getRoutes({ name: 'purchase' }).then((result) => {
      next((vm) => {
        vm.panes = result.obj;
      });
    }).catch(() => {
      next();
    });
  },
  // 监听路由变化 显示满足权限的路由
  beforeRouteUpdate (to, from, next) {
    const activeName = to.path.split('/')[2];
    let isMatch = false;
    for (const pane of this.paneList) {
      if (activeName === pane.name) {
        isMatch = true;
        break;
      }
    }
    if (isMatch) {
      next();
    } else {
      next({ path: '/404', replace: true });
    }
  },
  created () {
  },
  mounted () {
  }
};
</script>

<style lang="sass">
@import "../../styles/utils"
$TABHEIGHT: 40px
$SEARCHHEIGHT: 104px
$PAGEHEIGHT: 56px
.cp-purchase
  overflow-x: hidden
  overflow-y: auto
  background: $THEMECOLOR
  .pe-tabs
    position: relative
    height: $TABHEIGHT
    background: white
    padding-left: 20px
    .el-tabs__item:focus.is-active.is-focus:not(:active)
      box-shadow: none
    .el-tabs__nav-wrap::after
      background-color: white
  .pe-main
    top: $TABHEIGHT
  .el-dialog__header
    position: relative
    padding: 0
    height: 50px
    line-height: 50px
    background: $THEMECOLOR
    padding-left: 20px
  .el-dialog__title
    font-size: 17px
  .el-dialog__headerbtn
    line-height: 18px
    top: 16px
    right: 16px
  .el-dialog__body
    padding: 24px 28px
  .el-col
    white-space: nowrap
    overflow: hidden
    text-overflow: ellipsis
  .el-row
    margin-left: 0!important
    margin-right: 0!important
  .el-form-item--mini.el-form-item, .el-form-item--small.el-form-item
    margin-bottom: 15px
  // 搜索
  .pe-search
    height: $SEARCHHEIGHT
    overflow-x: auto
    overflow-y: hidden
    padding: 12px 0 12px 16px
    .el-form-item
      margin-right: 14px
    .el-form-item__label
      padding-right: 6px
    .el-range-editor--small .el-range-separator
      width: 24px
      text-align: center
  // 表格
  .pe-table
    position: absolute
    top: $SEARCHHEIGHT
    bottom: $PAGEHEIGHT
    left: 16px
    right: 16px
    overflow: auto
    table
      &::before
        display: none
      .icon-act
        font-size: 16px
        margin-left: 3px
        margin-right: 3px
  .pe-view-table
    margin-bottom: 16px
    width: 100%
    table
      width: 100%!important
      &::before
        display: none
      .icon-act
        font-size: 16px
        margin-left: 3px
        margin-right: 3px
    .el-table__empty-block
      display: none
    .append-content
      text-align: center
      margin: 8px auto
  // 分页
  .pe-pagination
    position: absolute
    bottom: 12px
    left: 0
    right: 0
    text-align: center
  .pe-pop-form
    .el-form-item
      width: 100%
      margin-right: 0
    .el-form-item__content
      width: calc(100% - 72px)
    .el-form-item__label
      text-align: left
    .el-select
      width: 100%
  .pe-deal-btns
    margin-top: 24px
    text-align: center
    .dia-btn
      width: 80px
    .dia-after
      margin-left: 40px
  .pe-title
    font-size: 14px
    margin-top: 16px
    span
      margin-left: 8px
      color: #409EFF
      font-size: 13px
  .pe-pop-show
    .el-row
      margin-bottom: 12px
      &:nth-child(odd)
        background: #f5f5f5
      &:nth-child(even)
        background: beige
    strong
      display: inline-block
      font-weight: 400
      margin-right: 8px
// tooltip 提示
.pe-act-drop
  .icon-act
    font-size: 16px
    margin-right: 3px
</style>
